<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);

onMounted(() => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value, null, {
    });
    const option = {
      legend: {
        orient: 'vertical',
        left: 'left',
        // 可以根据需要调整图例的文字样式
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '房间类型占比', // 修改为与酒店相关的名称
          type: 'pie',
          radius: [50, 200],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 120, name: '标准单人间' }, // 修改为酒店的房间类型或服务
            { value: 180, name: '标准双人间' },
            { value: 150, name: '豪华套房' },
            { value: 80, name: '行政套房' },
            { value: 90, name: '家庭房' },
            { value: 50, name: '无障碍房' },
            { value: 70, name: '海景房' },
            { value: 100, name: '总统套房' }
          ]
        }
      ]
    };

    myChart.setOption(option);
  } else {
    console.error('DOM元素未找到');
  }
});
</script>

<style scoped>
/* 您可以在这里添加样式 */
</style>
